<script lang="ts" setup>
import {ref, reactive, computed} from "vue";
import {toast} from "../../components/popup/popup";
import { goEditHouse ,goMy} from "../../tools/go";
import {getHouseHold,set,getUserId} from "../../store"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import BHeader from "../../components/header/bHeader.vue";
import {getHousesByUserId,deleteHouse,getHousePer} from "../../api/house/house";
import UniDataPickerView
  from "../../uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue";
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import UniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue";
import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import UniNumberBox from "../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";


const searchKeyword = ref("");
const isRefreshing = ref(false);
const detailPopup = ref();
const qrCodePopup = ref();
let currentHouse = reactive({
  id: "",
  household_id: "",
  householdLocal: "",
  house_name: "",
  house_rmake: "",
  update_by: "",
  update_time: "",
});


const qrFrom = ref()

const GuestAim = ref([
  {
    text: "亲戚来访",
    value: 1
  },
  {
    text: "客户来访",
    value: 2
  },{
    text: "快递配送",
    value: 3
  },{
    text: "家政服务",
    value: 4
  },{
    text: "其他",
    value: 5
  }
])

let qrFromData = ref({
  userId: getUserId(),
  houseId: "",
  aim: "",
  GuestTime: "",
  GuestNum: 0
})


const qrCodeUrl = ref(
    "https://public.readdy.ai/ai/img_res/20cfb02d8768a306da8c128e14fc3570.jpg",
);

const handleSearch = () => {
  // 实现搜索逻辑
};

const handleAdd = () => {
  toast("新增房屋信息","none");
  goEditHouse()
};

const showDetail = (house: any) => {
  Object.assign(currentHouse, house)
  detailPopup.value.open();
};

const closeDetail = () => {
  detailPopup.value.close();
};

const showQrCode = (house: any) => {
  Object.assign(currentHouse, house);
  qrFrom.value.open();
};

const genQr = () => {

  if (qrFromData.value.GuestTime === "") {
    toast("请选择来访时间", "none")
    return;
  }

  if (qrFromData.value.GuestNum === "" || qrFromData.value.GuestNum === 0) {
    toast("请输入来访人数", "none")
    return
  }

  if (qrFromData.value.aim === "") {
    toast("请选择来访目的", "none")
    return
  }

  qrFromData.value.aim = GuestAim.value[qrFromData.value.aim-1].text

  qrFromData.value.GuestTime.toString().trim();
  qrFromData.value.houseId = currentHouse.id;

  getHousePer(qrFromData.value).then(res => {
    qrCodeUrl.value = res.data
    qrCodePopup.value.open();
    qrFrom.value.close();
  })




}

const closeQrCode = () => {
  qrCodePopup.value.close();
};

const handleEdit = () => {
  toast(`编辑房屋信息：${currentHouse.house_name}`, "none")
  set("curHouse",currentHouse)
  goEditHouse()
};

const handleDelete = () => {
  toast(`删除房屋信息：${currentHouse.house_name}`, "none")
  uni.showModal({
    title: "提示",
    content: "确定要删除该房屋信息吗？",
    success: (res) => {
      if (res.confirm) {
        toast("删除成功", "success")
        deleteHouse(currentHouse.id).then(res => {
            init()
        })
        closeDetail();
      }
    },
  });
};

const saveQrCode = () => {
  toast("二维码已保存", "success")
};

const loadMore = () => {
  // 实现加载更多逻辑
};


//过滤函数
const filterHouseList = computed(() => {
  return HouseList.value.filter((house) => {
    return house.houseName.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
        house.householdLocal.toLowerCase().includes(searchKeyword.value.toLowerCase());
  })
})


const HouseList = ref([])

const getHouseList = () => {
  getHousesByUserId(getHouseHold()).then(res => {
    HouseList.value = res.data
  })
}

const init = () => {
  getHouseList()
}

init()

</script>

<template>

  <b-header title="房屋信息管理" :go="goMy">
    <uni-icons type="plusempty" @click="handleAdd"></uni-icons>
  </b-header>
  <view class="container">
    <!-- 顶部导航栏 -->

    <!-- 搜索区域 -->
    <view class="search-area">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999999" />
        <input
            v-model="searchKeyword"
            type="text"
            placeholder="搜索房屋名称/位置"
            class="search-input"
            @input="handleSearch"
        />
      </view>
    </view>

    <!-- 列表区域 -->
    <scroll-view
        scroll-y
        class="list-container"
        @scrolltolower="loadMore"
        :refresher-triggered="isRefreshing"
    >
      <view
          v-for="item in filterHouseList"
          :key="item.id"
          class="list-item"

      >
        <view class="item-left">
          <text class="house-name">{{ item["houseName"] }}</text>
          <text class="house-location">{{ item["householdLocal"] }}</text>
          <text class="household">住户ID: {{ item["householdId"] }}</text>
        </view>
        <view class="item-right">
          <uni-icons
              type="more"
              size="24"
              color="#666666"
              @click="showQrCode(item)"
          />
          <uni-icons type="right" size="16" color="#999999" @click="showDetail(item)" />
        </view>
      </view>
    </scroll-view>

    <!-- 详情弹窗 -->
    <uni-popup ref="detailPopup" type="bottom">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">房屋详情</text>
          <uni-icons
              type="closeempty"
              size="24"
              color="#666666"
              @click="closeDetail"
          />
        </view>
        <view class="detail-content">
          <view class="detail-item">
            <text class="label">房屋ID：</text>
            <text class="value">{{ currentHouse["houseName"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">住户ID：</text>
            <text class="value">{{ currentHouse["householdId"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">房屋位置：</text>
            <text class="value">{{ currentHouse["householdLocal"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">房屋名称：</text>
            <text class="value">{{ currentHouse["houseName"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">房屋备注：</text>
            <text class="value">{{ currentHouse["houseRmake"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">更新者：</text>
            <text class="value">{{ currentHouse["updateBy"] }}</text>
          </view>
          <view class="detail-item">
            <text class="label">更新时间：</text>
            <text class="value">{{ currentHouse["updateTime"] }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <button class="btn edit-btn" @click="handleEdit">编辑</button>
          <button class="btn delete-btn" @click="handleDelete">删除</button>
        </view>
      </view>

    </uni-popup>

    <uni-popup ref="qrFrom" type="center">

      <view class="qrBack">

        <uni-section title="来访目的" type="line">
          <uni-data-select :localdata="GuestAim" v-model="qrFromData.aim"></uni-data-select>
        </uni-section>

        <uni-section title="来访人数" type="line">
          <uni-number-box :value="1" :step="1" v-model="qrFromData.GuestNum"/>
        </uni-section>

        <uni-section title="来访时间" type="line">
          <uni-datetime-picker type="date" v-model="qrFromData.GuestTime"></uni-datetime-picker>
        </uni-section>

        <uni-section  title="">
            <button class="btn edit-btn" @click="genQr">生成二维码</button>
        </uni-section>

      </view>

    </uni-popup>

    <!-- 二维码弹窗 -->
    <uni-popup ref="qrCodePopup" type="center">
      <view class="qrcode-popup">
        <uni-icons
            type="closeempty"
            size="24"
            color="#666666"
            class="close-icon"
            @click="closeQrCode"
        />
        <image :src="qrCodeUrl" class="qrcode-image" />
        <text class="qrcode-text">房屋ID: {{ currentHouse.id }}</text>
        <button class="save-btn" @click="saveQrCode">保存二维码</button>
      </view>
    </uni-popup>

  </view>
</template>



<style scoped lang="scss">
@import "../../static/css/title/index.css";


.container {
  .qrBack {
    min-width: 80vw;
    background-color: white;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .search-area {
    padding: 24rpx 32rpx;
    background-color: #ffffff;
    flex-shrink: 0;
  }

  .search-box {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 16rpx 24rpx;
  }

  .search-input {
    flex: 1;
    margin-left: 16rpx;
    font-size: 14px;
  }

  .list-container {
    flex: 1;
    overflow: auto;
  }

  .list-item {
    background-color: #ffffff;
    margin: 24rpx 32rpx;
    padding: 32rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-left {
    flex: 1;
    margin-right: 32rpx;
  }

  .house-name {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    display: block;
    margin-bottom: 8rpx;
  }

  .house-location {
    font-size: 14px;
    color: #666666;
    display: block;
    margin-bottom: 8rpx;
  }

  .household {
    font-size: 12px;
    color: #999999;
    display: block;
  }

  .item-right {
    display: flex;
    align-items: center;
    gap: 24rpx;
  }

  .detail-popup {
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 32rpx;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
  }

  .popup-title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }

  .detail-content {
    margin-bottom: 32rpx;
  }

  .detail-item {
    margin-bottom: 24rpx;
  }

  .label {
    font-size: 14px;
    color: #666666;
    margin-right: 16rpx;
  }

  .value {
    font-size: 14px;
    color: #333333;
  }

  .popup-footer {
    display: flex;
    gap: 24rpx;
  }

  .btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
  }

  .edit-btn {
    background-color: #2979ff;
    color: #ffffff;
  }

  .delete-btn {
    background-color: #ff3b30;
    color: #ffffff;
  }

  .qrcode-popup {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 48rpx;
    position: relative;
    width: 600rpx;
  }

  .close-icon {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }

  .qrcode-image {
    width: 400rpx;
    height: 400rpx;
    margin: 0 auto 32rpx;
    display: block;
  }

  .qrcode-text {
    text-align: center;
    font-size: 14px;
    color: #666666;
    display: block;
    margin-bottom: 32rpx;
  }

  .save-btn {
    background-color: #2979ff;
    color: #ffffff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 8px;
    font-size: 14px;
  }
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}





</style>
